<template>
  <div>
    <el-form :model="form" ref="form" name="basic" label-width="80px" autocomplete="off" style="margin-top: 10px;margin-left: 10px;">
      <el-row>
        <el-col :span="6">
          <CompanySelect :compName.sync="form.compName" />
        </el-col>
      </el-row>
    </el-form>

    <div style="margin-right: 15px;">
      <el-upload class="upload-demo" style="float: right;margin-bottom: 5px;" action=""
        :http-request="handleUpload1" :show-file-list="false">
        <el-button type="warning" size="mini">导入</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini"
        @click="clickDlTemp">导出</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini"
        @click="clickAdd">新增</el-button>
      <el-button type="success" style="float: right;margin-bottom: 5px;margin-right: 10px;"
        size="mini" @click="clickQuery">查询</el-button>
    </div>

    <div style="padding-left: 10px;">
      <el-table :data="tableData" :key="key" style="border: solid 1px #c0c0c0;" row-key="index"
        header-row-class-name="table_header" :header-cell-style="{ borderColor: '#C0C0C0' }"
        :cell-style="{ borderColor: '#C0C0C0' }" border @cell-dblclick="doubleClick"
        :row-class-name="tableRowClassName" id="out-table">
        <el-table-column prop="compName" label="企业名称" min-width="260px" align="left">

        </el-table-column>
        <el-table-column prop="" label="1月" align="center">
          <el-table-column prop="score11" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score11" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score11 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score12" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score12" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score12 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="2月" align="center">
          <el-table-column prop="score21" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score21" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score21 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score22" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score22" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score22 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="3月" align="center">
          <el-table-column prop="score31" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score31" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score31 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score32" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score32" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score32 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="4月" align="center">
          <el-table-column prop="score41" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score41" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score41 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score42" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score42" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score42 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="5月" align="center">
          <el-table-column prop="score51" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score51" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score51 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score52" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score52" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score52 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="6月" align="center">
          <el-table-column prop="score61" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score61" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score61 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score62" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score62" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score62 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="7月" align="center">
          <el-table-column prop="score71" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score71" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score71 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score72" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score72" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score72 }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="" label="8月" align="center">
          <el-table-column prop="score81" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score81" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score81 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score82" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score82" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score82 }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="" label="9月" align="center">
          <el-table-column prop="score91" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score91" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score91 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score92" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score92" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score92 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="10月" align="center">
          <el-table-column prop="score101" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score101" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score101 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score102" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score102" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score102 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="11月" align="center">
          <el-table-column prop="score111" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score111" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score111 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score112" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score112" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score112 }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="12月" align="center">
          <el-table-column prop="score121" label="发现" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score121" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score121 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score122" label="整改" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable
                v-model="scope.row.score122" @keyup.enter.native="blurInput"
                @blur="onBlur(scope.row, scope.column)"></el-input>
              <span v-else>{{ scope.row.score122 }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="danger"
              @click="clickDel(scope.$index, scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-pagination background layout="prev, pager, next" :total="total_size" :page-size="100"
      :current-page="page_no">
    </el-pagination>

    <UpdateModal ref="UpdateModalRef" :clickQuery="clickQuery" :saveFun="updateCompDanger"
      :addFun="addCompDanger" />

    <el-dialog title="删除提示" :visible.sync="delVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import UpdateModal from './updateModal';
import {
  queryCompDangerList,
  updateCompDanger,
  addCompDanger,
  delCompDanger,
  importExcel,
  exportCompDanger,
} from '@/service/compDanger';
import columns from './table';
import CompanySelect from '@/components/CompanySelect';

// import { tableMixin } from '@/mixin/table';
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
export default {
  components: { UpdateModal ,CompanySelect},
  // mixins: [tableMixin],

  data() {
    return {
      data: [],
      key: Math.random(),

      pagination: {
        showLessItems: true,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      query: {},
      columns: columns,
      currItem: {},
      page_no: 0,
      page_size: 100,
      form: {},
      tableLoading: false,
      tableData: [],
      total_size: 0,
      loading: false,
      updateCompDanger,
      addCompDanger,
      queryCompDangerList,
      delVisible: false,
    };
  },

  methods: {
    clickShowEdit(index, record) {
      this.$refs.UpdateModalRef.openEditDialog({ ...record });
    },
    clickAdd(record) {
      this.$refs.UpdateModalRef.openAddDialog();
    },
    clickDel(index, row) {
      this.delVisible = true;
      this.currItem = { ...row };
    },
    blurInput(e){
      e.target.blur()
    },
    tableRowClassName({ row, rowIndex }) {
        if (row['isHouseOwner'] === 'Y') {
          console.log('warn');
          return 'warning-row';
        }
        return '';
      },

    async clickDlTemp(index, row) {
      const res = await exportCompDanger({});
      let url = window.URL.createObjectURL(res);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;

      const date = new Date();
      let dateStr =
        date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();

      link.setAttribute('download', '企业隐患-' + dateStr + '.xlsx');

      document.body.appendChild(link);

      link.click();

      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    },

    blurInput(e){
      e.target.blur()
    },
    doubleClick(row, column) {
      // 避免点击过快导致多个输入框处于焦点状态
      row[column.property + 'Show'] = false;
      // 避免点击其他单元格导致表格刷新

      console.log('column.property', column.property);
      if (column.property.indexOf('score') < 0) return;
      row[column.property + 'Show'] = true;
      this.key = Math.random();
      console.log('row', row);
      // this.updateTable(row);
    },
    //输入框失焦事件
    onBlur(row, column) {
      row[column.property + 'Show'] = false;
      this.updateTable(row);

      // 请求后台更改数据
    },
    async saveData(row) {
      const res = await updateCompDanger(row);
      if (res.success) {
        this.$message.success('保存成功');
      } else {
        this.$message.error('保存失败');
      }
      this.clickQuery();
    },

    //更新表格
    updateTable(row) {
      this.saveData(row);
    },

    getFD(fileObj) {
      const formData = new FormData();
      formData.append('file', fileObj.file);
      return formData;
    },
    async handleUpload1(fileObj) {
      const fd = this.getFD(fileObj);
      let res = await importExcel(fd);
      if (res.success) {
        this.clickQuery();
      }
      return false;
    },

    async handleDelete() {
      this.delVisible = false;
      const res = await delCompDanger({
        ...this.currItem,
      });
      if (res.success) {
        this.clickQuery();
      } else {
      }
    },

    async clickQuery() {
      this.loading = true;
      const data = await queryCompDangerList({
        ...this.form,
        page_no: this.page_no,
        page_size: this.page_size,
      });
      if (data.success) {
        this.total_size = data.total;
        this.tableData = data.dataList;
      } else {
        this.total_size = 0;
        this.tableData = [];
      }
      this.loading = false;
    },

    // updateCompDanger(){

    // }
  },
  created() {
    // const date = new Date();
    // const currMonth = date.getFullYear() + '-' + (date.getMonth() + 1);
    // this.$set(this.form, 'scoreMonth', currMonth);
    // this.form.scoreMonth = currMonth;
    // console.log('this.form.currMonth', this.form.currMonth);
  },

  mounted() {
    console.log('ff:' + this.tableData);
    console.log('ff11:' + this.clickQuery);

    this.clickQuery(queryCompDangerList);
  },
};
</script>
<style scoped>
.a {
}

/deep/ .table_header th {
  background-color: #e3e3e3 !important;
  height: 40px;
}

::v-deep .el-table .el-table__cell {
  padding: 4px 0px;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
::v-deep .el-table td.el-table__cell div {
  height: 35px;
  line-height: 35px;
}
::v-deep .el-table .el-table__cell {
  padding: 0px 0px;
}

::v-deep .el-table .cell {
  padding: 0;
}
::v-deep .el-table .warning-row {
  color: red;
}
</style>